<!doctype html>
<html>
<head>
	<title>grid demo | draggable.js</title>

	<meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1, maximum-scale=1" />

	<link rel="stylesheet" href="../__common/common.css" />
	<link rel="stylesheet" href="grid.css" />

</head>
<body>

	<ul id="nav">
		<li><a href="../basic">Basic</a></li>
		<li><a href="../bounded">Bounded</a></li>
		<li><a href="../boundedcustom">Bounded (custom)</a></li>
		<li><a class="cur" href="#">Grid</a></li>
	</ul>

	<div id="container">
		<div class="ball green"></div>
	</div>
	<div id="info">
		<div class="column">
			<label>
				Grid size
				<input type="number" id="input-grid" value="10" />
			</label>
			<label>
				Smooth drag
				<input type="checkbox" id="input-smooth" checked />
			</label>
		</div>
		<div class="column">
			<span class="coords-x"></span>
			<span class="coords-y"></span>
		</div>
		<div class="column"></div>
	</div>

	<script src="../../src/draggable.js"></script>
	<script src="../__common/common.js"></script>

	<!-- this is the script you're looking for... -->
	<script src="grid.js"></script>

</body>
</html>